<template>
  <a-drawer
      title="客户详情"
      :visible="visible"
      :destroyOnClose="true"
      :width="460"
      :body-style="{
      height: 'calc(100%)',
      boxSizing: 'border-box',
      padding: '16px 0',
    }"
      @close="onClose"
  >
    <div class="drawer-content">
      <a-radio-group
          v-model:value="activeKey"
          class="radio-box"
          button-style="solid"
      >
        <a-radio-button value="2" style="flex: 1">客户详情</a-radio-button>
        <a-radio-button value="1" style="flex: 1">跟进信息</a-radio-button>
      </a-radio-group>
      <div class="content-box">
        <a-form layout="vertical">
          <a-row :wrap="true" :gutter="12" v-show="activeKey == 1">
            <!--   跟进历史   -->
            <a-col :span="24">
              <div style="margin-bottom: 16px" v-if="followList.length" class="text-title">
                跟进历史
              </div>
              <a-timeline v-if="followList.length">
                <a-timeline-item v-for="(item, index) in followList" :key="index">
                  <p v-if="item?.created_at">{{ item.created_at }}</p>
                  <p v-if="item?.operate_content?.status_txt">
                    状态：{{ item.operate_content?.status_txt }}</p>
                  <p v-if="item?.operate_content?.remark">
                    内容：{{ item.operate_content?.remark }}</p>
                  <p v-if="item?.operate_content?.user_name">
                    跟进人：{{ item?.operate_content?.user_name }}
                    {{ item?.operate_content?.user_phone }}
                  </p>
                  <p v-if="item?.operate_content?.status==30">
                    合同编号：
                    <template v-for="(sItem,index) in item?.operate_content?.contracts">
                      <span>{{ sItem.contract_number }}</span>
                      <span>{{
                          index != item?.operate_content?.contracts.length - 1 ? ',' : ''
                        }}</span>
                    </template>
                  </p>
                </a-timeline-item>
              </a-timeline>

              <div style="margin-bottom: 16px" v-if="followList.length" class="text-title">
                线索跟进历史
              </div>
              <a-timeline style="margin-top: 15px">
                <a-timeline-item v-for="item in clueList">
                  <p>
                    {{ item.created_at }}
                  </p>
                  <p v-if="item?.operate_content?.status_txt">
                    状态：{{ item.operate_content.status_txt || "--" }}
                  </p>
                  <p v-if="item?.operate_content?.remark">
                    内容：{{ item.operate_content.remark || "--" }}
                  </p>
                  <p
                      v-if=" item?.operate_content?.user_name ||  item?.operate_content?.user_phone "
                  >
                    跟进人： {{ item?.operate_content?.user_name }}
                    {{ item?.operate_content?.user_phone }}
                  </p>
                </a-timeline-item>
              </a-timeline>
            </a-col>

            <a-empty v-if="followList.length==0&&clueList.length==0"/>

          </a-row>
          <a-row :wrap="true" :gutter="12" v-show="activeKey == 2">
            <a-col :span="24">
              <a-form-item label="客户姓名" v-bind="validateInfos.name">
                <span>{{ formData.name || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="客户电话" v-bind="validateInfos.tel">
                <span>{{ formData.tel || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="公司" v-bind="validateInfos.company">
                <span>{{ formData.company || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="行业" v-bind="validateInfos.org_industry">
                <span>{{ formData?.org_industry?.name || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="意向项目" v-bind="validateInfos.village_id">
                <span>{{ formData.village_name }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="楼宇名称" v-bind="validateInfos.build_name">
                <span>{{ formData.build_name }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="预计签约时间" v-bind="validateInfos.expect_contract">
                <span>{{ formData.expect_contract || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="需求面积段" v-bind="validateInfos.expect_area_max">
                <a-input-group size="default">
                  <span>{{ formData.expect_area_min }}</span>
                  -
                  <span>{{ formData.expect_area_max }}</span>
                  ㎡
                </a-input-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="客户预算" v-bind="validateInfos.budget_amount">
                <span>{{
                    formData.budget_amount || formData.budget_amount == 0 ? '￥' + formData.budget_amount : '--'
                  }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="关联渠道" v-bind="validateInfos.channel_id">
                <span>{{ formData.channel_name || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="成交几率" v-bind="validateInfos.deal_precent">
                <span>{{
                    formData.deal_precent || formData.deal_precent == 0 ? formData.deal_precent + '%' : '--'
                  }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="标签" v-bind="validateInfos.tag_id">
                <template v-if="formData?.tag_arr?.length">
                  <a-tag v-for="(tag, index) in formData.tag_arr" :key="index">
                    {{ tag.name }}
                  </a-tag>
                </template>
                <tempalte v-else>
                  <span>--</span>
                </tempalte>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="备注" v-bind="validateInfos.remark">
                <span>{{ formData.remark || '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <div class="text-title">合同信息</div>
            </a-col>
            <a-col :span="24" v-if="formData.contracts && formData.contracts?.length">
              <a-form-item label="合同编号" v-bind="validateInfos.contracts">
                <template v-for="(contract, index) in formData.contracts" :key="index">
                <span :class="contract.id ? 'link' : ''"
                      @click.stop="checkContractDetail(contract.id)">
                {{ contract.contract_number }}
              </span>
                  <span
                      v-if="formData.contracts?.length > 1 && index + 1 !== formData.contracts.length"
                  > 、 </span
                  >
                </template>

              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <!--  合同详情  -->
    <ContractDetailDrawer
        :visible="contractDetailVisible"
        :id="contractDetailId"
        @handleCancel="
        () => {
          contractDetailVisible = false;
        }
      "
    />
  </a-drawer>
</template>
<script>
import {defineComponent, reactive, toRefs, computed, watch, defineAsyncComponent} from "vue";
import {Form, message} from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";

const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";
const ContractDetailDrawer = defineAsyncComponent(() =>
    import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);
export default defineComponent({
  name: "CustomerDetail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {ContractDetailDrawer},
  setup(props, {emit}) {
    const state = reactive({
      spinning: false,
      contractDetailVisible: false,
      contractDetailId: 0,
      activeKey: '2',
      followList: [],
      clueList: []
    });

    const formData = reactive({
      name: '',
      tel: '',
      company: '',
      village_id: undefined,
      budget_amount: undefined, // 客户预算金额
      expect_contract: undefined, // 预计签约时间
      expect_area_min: undefined,
      expect_area_max: undefined,
      channel_id: undefined, // 关联渠道
      remark: '', // 备注
      deal_precent: undefined, // 成交几率
      tag_id: undefined,
      village_name: '',
      channel_name: '',
      build_name: '',
      tag_arr: [],
      contracts: undefined,
      org_industry: undefined,
    });
    const ruleRef = reactive({
      name: [{required: true, message: "必填"}],
      tel: [{required: true, message: "必填"}],
      village_id: [{required: true, message: "必选"}],
    });

    const {resetFields, validateInfos} = useForm(formData, ruleRef);


    const onClose = () => {
      emit("handleCancel");
    };
    const setModelRef = (state) => {
      for (let key in state) {
        formData[key] = state[key];
      }
    };

    const getDetail = () => {
      state.spinning = true;
      request.get("/org", "/business/customer/detail", {id: props.id}).then((res) => {
        const detail = res.detail;
        setModelRef(detail);
        state.spinning = false;
      });
    };

    /** 查看合同详情 */
    const checkContractDetail = (id) => {
      if (id) {
        state.contractDetailId = id;
        state.contractDetailVisible = true;
      }
    };

    const getHistory = () => {
      request.get("/org", "/business/customer/followupList", {id: props.id}).then((res) => {
        state.followList = res?.list || [];
        state.clueList = res?.clueLogList?.data || [];
      });
    };

    const init = () => {
      getDetail();
      getHistory();
    };

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            init();
          } else {
            resetFields();
            state.spinning = false;
            state.contractDetailVisible = false;
            state.contractDetailId = 0;
            state.activeKey = '2';
            state.followList = [];
            state.clueList = [];
          }
        }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      onClose,
      checkContractDetail,
    };
  },
});
</script>

<style lang="less" scoped>
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.radio-box {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  text-align: center;
  padding: 0 16px;
}

.content-box {
  flex: 1;
  padding: 0 16px;
  overflow: auto;
}

:deep(.ant-drawer-body) {
  padding: 16px 0 !important;
}

.ant-tag {
  margin: 4px 8px 4px 0;
}
</style>
